<template>
	<view>
		<view style="padding-top:260rpx;">
			
			<view style="height:70px;">
				<view class="login-input"  :class="{active:errTip==true}">
					<input type="text" placeholder="手机号/邮箱" v-model="From1.UserName" placeholder-style="color:#848484;text-align: center;"/>
				</view>
				<text class="tips" v-show="errTip">{{UserNametips}}</text>
			</view>
			
			<view style="height:70px;">
			<view class="login-input"  :class="{active:errTip==true}">
				<input type="password" placeholder="您的密码" v-model="From1.PassWord" placeholder-style="color:#848484;text-align: center;" />
			</view>
			<text class="tips" v-show="errTip">{{PassWordtips}}</text>
		
			</view>
		</view>
		<view class="login-button">
		
			<p class="toforget">忘记密码？</p>
			<!-- <text class="register" @click="Jump">暂无账号点击注册</text> -->
			<button class="btnOne"@click="login">登录</button>
			<button class="btnTwo" @click="Jump">注册账号</button>
		</view>
		
		
		<view class="login-empower">
			<label class="radio" @click="isEmpower()">
				<radio value="" :checked="checkedBox" style="transform: scale(0.65);"/><text>
				同意&laquo隐私保护声明&raquo和&laquo用户使用协议&raquo<br/>
				 QQ与微信的账户资产和权限不互通
				</text>
			</label>
			
<!-- 		<text>{{From.at(this.From.length-2).UserName}}</text> -->
		<!-- <text>{{From}}</text> -->
		</view>
	</view>
</template>

<script>
	 const userData =require('@/Data/UserData.json');

	
	export default {
		data() {
			return {
				
				From:[],
				checkedBox:false, //单选框
				errTip:false,
				UserNametips:'',
				PassWordtips:'',
                From1:{}
			}
		},
		//uni数据加载
		onLoad(){
			 this.getFrom();
			
		
		},
		
		
		// 读取本地存储密码及账号
		onShow() {
		  	uni.getStorage({
		  		key:'UserInfo',
				success:(e)=>{
					this.From1.UserName = e.data.UserName  
					this.From1.PassWord = e.data.PassWord
				}
		  	})
		},
		methods: {
			isEmpower(){
				this.checkedBox=!this.checkedBox;
				
			},
			
      getFrom(){
		  console.log(userData);
		  this.From=userData;
		  this.From1=this.From[this.From.length-1];
		  this.From=uni.getStorageSync('user');
	      
		},
			/* 
			登录逻辑部分
			 */
			login(){
				var that = this
				if(that.From1.UserName && that.From1.PassWord){
					if(that.From1 !=null){
						/* 验证成功跳转目标页面 */
						uni.reLaunch({
							url:'/pages/home/home'
						})
						// uni.navigateTo({
						// 	url:'../components/home'
						// })
						
					}else{
						that.UserNametips = "该用户不存在"
						that.PassWordtips = "密码错误请重新填写"
					    that.errTip = true	
					}
				}else{
					that.UserNametips = "账号不能为空"
					that.PassWordtips = "密码不能为空"
					that.errTip = true
				}
				
			},
			/* 记住密码用户第二次进入页面直接填充 */
			clickchecked(){
				var that = this
				this.checked =!this.checked
				if(that.checked == true){
					if(that.From1.UserName && that.From1.PassWord){
						uni.setStorage({
							key:'UserInfo',
							data:that.From1
						})
					}	
				}
			},
			Delete(){
				this.From1.UserName = ""
			},
			Delete2(){
				this.From1.PassWord = ""
			},
			Jump(){
				uni.reLaunch({
					url:'../register/index'
				})
			},
			Switch(){
				this.SwiTch = !this.SwiTch
			}
		}
	}
</script>

<style lang="less">
	/* 背景图设置 */
	page{
		width:100%;
		height:100%;
		
	
		}
	.login-input{
		width:70%;
		height:63px;
		margin:0px auto;
		display: flex;
		input{
			width:100%;
			border:2px solid rgb(40, 40, 40);
			border-radius: 20px;
			height:40px;
			color: rgb(30, 30, 30);
			padding:0 5px;
			font-size:14px;
			margin-top:25px;
			outline: none;
			-webkit-appearance: none; /*去除系统默认的样式*/
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/
		}
	}
	.login-button{
		width:70%;
		margin:0px auto;
		button{
			width:100%;
			font-size:15px;
			height:40px;
			border-radius: 20px;
		    border:2px solid rgb(40, 40, 40);
			margin-top:17px;
		}
		.btnOne{
			color: rgb(255,255,255);
			background-color: rgb(170, 85, 255);
			
		}
		.btnTwo{
			color: rgb(16, 16, 16);
			background-color: rgb(255, 255, 255);
		}
		// 忘记密码
		.toforget{
			margin-top: 2px;
			padding: 5px;
			font-size:10px;
			color:rgb(139, 139, 139);
		}
		.register{
			font-size:12px;
			color: rgb(255,255,255);
			float: right;
			padding-top:10px;
			text-decoration: underline;
		}
	}
	//授权
	.login-empower{
	   width: 70%;
	   margin: 80px auto;
	   font-size: 10px;
	  	color: rgb(16, 16, 16);
	   text-align: center; 
	   }
	  

	
	.tips{
	
	   	color:rgb(245,8,8);
		font-size:12px;
		display: initial;
		float: right;
		padding-right:50px;
		
	}
</style>
